import React, { Component } from 'react'
import axios from 'axios';
import { NavLink } from 'react-router-dom';

export default class NewsList extends Component {

    state = {
        news: []
    }

    async componentDidMount(){
        //发送 AJAX 获取新闻列表数据
        let result = await axios('https://api.apiopen.top/getWangYiNews');
    
        this.setState({
          news: result.data.result
        })
    }

    render() {
        return (
            <div>
                <header>新闻列表</header>
                    <ul className="news-list">

                    {this.state.news.map((item, index) => {
                        return <li key={index}>
                        <div className="left">
                            <NavLink to={`/news/`+ item.path.split('/').pop().split('.').shift()}>{item.title}</NavLink>
                        </div>
                        <div className="right">
                            <img  src={item.image} alt="" />
                        </div>
                        </li>
                    })}
                    
                    </ul>
            </div>
        )
    }
}
